@use '../../../styles/theme/variables' as *;
@use '../../../styles/theme/mixin' as *;

$module: '#{$sun-prefix}-button';

.#{$module} {
  // 字体
  @include font-size-regular;

  font-weight: $font-weight-medium;

  // 布局
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: $spacing-extra-tight;

  //  尺寸
  height: $height-control-default;
  padding: $spacing-extra-tight $spacing-tight;

  //  边框，阴影
  border: $border-thickness transparent solid;
  border-radius: var(--semi-border-radius-small);

  // 交互
  cursor: pointer;
  user-select: none;

  // ============================ 按钮类型 type ============================
  &-primary {
    color: var(--semi-color-primary);

    /** 深色主题下，其背景色和类型有关，所以需要使用交集选择器 */
    &.#{$module}-solid {
      background-color: var(--semi-color-primary);

      //  禁用状态下没有 hover 和 active 背景的变化
      &:hover:not(.#{$module}-disabled) {
        background-color: var(--semi-color-primary-hover);
      }

      &:active:not(.#{$module}-disabled) {
        background-color: var(--semi-color-primary-active);
      }
    }

    &.#{$module}-outline {
      border: 1px solid var(--semi-color-primary);
    }
  }

  &-secondary {
    color: var(--semi-color-secondary);
    &.#{$module}-solid {
      background-color: var(--semi-color-secondary);

      &:hover:not(.#{$module}-disabled) {
        background-color: var(--semi-color-secondary-hover);
      }

      &:active:not(.#{$module}-disabled) {
        background-color: var(--semi-color-secondary-active);
      }
    }
    &.#{$module}-outline {
      border: 1px solid var(--semi-color-secondary);
    }
  }

  &-tertiary {
    color: var(--semi-color-tertiary);
    &.#{$module}-solid {
      background-color: var(--semi-color-tertiary);

      &:hover:not(.#{$module}-disabled) {
        background-color: var(--semi-color-tertiary-hover);
      }

      &:active:not(.#{$module}-disabled) {
        background-color: var(--semi-color-tertiary-active);
      }
    }
    &.#{$module}-outline {
      border: 1px solid var(--semi-color-secondary);
    }
  }

  &-warning {
    color: var(--semi-color-warning);
    &.#{$module}-solid {
      background-color: var(--semi-color-warning);

      &:hover:not(.#{$module}-disabled) {
        background-color: var(--semi-color-warning-hover);
      }

      &:active:not(.#{$module}-disabled) {
        background-color: var(--semi-color-warning-active);
      }
    }
    &.#{$module}-outline {
      border: 1px solid var(--semi-color-warning);
    }
  }

  &-danger {
    color: var(--semi-color-danger);
    &.#{$module}-solid {
      background-color: var(--semi-color-danger);

      &:hover:not(.#{$module}-disabled) {
        background-color: var(--semi-color-danger-hover);
      }

      &:active:not(.#{$module}-disabled) {
        background-color: var(--semi-color-danger-active);
      }
    }
    &.#{$module}-outline {
      border: 1px solid var(--semi-color-danger);
    }
  }

  // ============================ 按钮主题 theme ============================

  /**
    浅色主题下，文字颜色是类型色，背景颜色是白色；
  */
  &-light {
    background-color: var(--semi-color-fill-0);

    &:hover:not(.#{$module}-disabled) {
      background-color: var(--semi-color-fill-1);
    }

    &:active:not(.#{$module}-disabled) {
      background-color: var(--semi-color-fill-2);
    }

    //  禁用状态下 背景色 和 主题有关；
    &.#{$module}-disabled {
      background-color: var(--semi-color-fill-1);
    }
  }

  /**
    深色主题下，文字颜色都是白色，背景颜色是类型色；
   */
  &-solid {
    color: var(--semi-color-white);

    //  禁用状态下 背景色 和 主题有关；
    &.#{$module}-disabled {
      background-color: var(--semi-color-disabled-bg);
    }
  }

  /**
    无背景主题下，文字颜色是类型色，背景颜色是透明；
  */
  &-borderless {
    background-color: transparent;

    &:hover:not(.#{$module}-disabled) {
      background-color: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
    }

    &:active:not(.#{$module}-disabled) {
      background-color: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下;
    }
  }

  /**
    边框主题下，文字颜色是类型色，背景颜色是透明；边框颜色和类型色有关，所以需要使用交集选择器
  */
  &-outline {
    background-color: transparent;

    &:hover:not(.#{$module}-disabled) {
      background-color: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
    }

    &:active:not(.#{$module}-disabled) {
      background-color: var(
        --semi-color-fill-1
      ); // 边框模式按钮背景颜色 - 按下;
    }

    &.#{$module}-disabled {
      border: 1px solid var(--semi-color-disabled-border);
      background-color: var(--semi-color-disabled-fill);
    }
  }

  // ============================ 按钮尺寸 size ============================
  &-small {
    height: $height-control-small;
    padding: $spacing-super-tight $spacing-extra-tight;
  }

  &-large {
    height: $height-control-large;
    padding: $spacing-tight $spacing-base-tight;
  }

  // ============================ 加载中 ============================
  &-loading {
    pointer-events: none; // 禁止点击
    cursor: not-allowed; // 鼠标悬浮时显示禁用状态

    @keyframes #{$sun-prefix}-animation-rotate {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .#{$module}-loading-icon {
      width: 14px;
      height: 14px;
      animation: 0.6s linear infinite #{$sun-prefix}-animation-rotate;
      animation-fill-mode: forwards;
    }

    &.#{$module}-disabled {
      pointer-events: all; // 让鼠标悬浮时显示禁用状态
    }
  }

  // ============================ 禁用 ============================

  /**
    禁用状态下没有 hover 和 active 背景的变化;
    禁用状态下 背景色 和 主题有关；
  */
  &-disabled {
    color: var(--semi-color-disabled-text);
    cursor: not-allowed; // 鼠标悬浮时显示禁用状态
  }

  // ============================ 块级按钮 ============================
  &-block {
    width: 100%;
  }
}
